<!DOCTYPE html>
<html>
<head>
  <title>extends option</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。 -->
  <div id="app">
   {{num}}
   ${num}
   <p><button @click = add>add</button></p>
  </div>
  <script type="text/javascript">
    // 如果扩展的方法和原生的方法名相同，只执行原生的方法
    var extendsObj = {
      updated: function(){
        console.log("我是扩展的updated");
      },
      methods:{
        add: function(){
          console.log("我是扩展出来的方法");
          this.num ++
        }
      }
    }


    var app = new Vue({
      el:"#app",
      data:{
        num : 1,
      },
      methods: {
        add: function(){
          console.log("我是原生的方法");
          this.num ++
        }
      },
      updated: function(){
        console.log("我是原生的updated");
      },
      extends: extendsObj,
      // 改变插值形式
      delimiters: ['${','}']
    })
  </script>
</body>
</html>